const gulp = require("gulp"),
  htmlmin = require("gulp-htmlmin"),
  uglify = require("gulp-uglify"),
  babel = require("gulp-babel"),
  sass = require("gulp-sass"),
  cleanCss = require("gulp-clean-css"),
  connect = require("gulp-connect");

// 使用 gulp 定制任务
// gulp.task 定制任务
// 第一个参数 是任务的名字   第二个参数 是 任务要做什么事情
// gulp.task('a',() => {
//     // 1、找到原始文件   -- src
//     // 2、生成新的文件   -- dist
//     console.log("123")
// })

// 定制 html 任务
gulp.task("html", () => {
  // 1、找到原始文件   -- src
  gulp
    .src("src/**/*.html")
    //  2、对这个原始文件做一些处理
    .pipe(
      htmlmin({
        removeComments: true, //清除HTML注释

        collapseWhitespace: true, //压缩HTML

        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked/>

        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: false, //删除<style>和<link>的type="text/css"

        minifyJS: true, //压缩页面JS

        minifyCSS: true //压缩页面CSS
      })
    )
    // 3、生成新的文件   -- dist
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
});

//定制 css 任务
// + scss 转为 css   =>  node-sass gulp-sass
// + 压缩 css 代码
gulp.task("css", () => {
  gulp
    .src("src/css/**/*.scss")
    .pipe(sass()) // sass 转 CSS
    .pipe(cleanCss()) // 压缩 CSS 代码
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
});

// 定制 js 任务
gulp.task("js", () => {
  gulp
    .src("src/js/**")
    .pipe(
      babel({
        presets: ["@babel/env"]
      })
    )
    .pipe(uglify()) // 压缩 JS 代码
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});

// 定制 图片任务
gulp.task("img", () => {
  gulp.src("src/img/**").pipe(gulp.dest("dist/img"));
});

// 定制 lib 任务
gulp.task("lib", () => {
  gulp.src("src/lib/**").pipe(gulp.dest("dist/lib"));
});
// 添加 监控任务
gulp.task("watch", () => {
  gulp.watch("./src/css/**", ["css"]);
  gulp.watch("./src/**/*.html", ["html"]);
  gulp.watch("./src/js/**", ["js"]);
  gulp.watch("./src/lib/**", ["lib"]);
});
gulp.task("server", function () {
  connect.server({
    livereload: true,
    port: 8000,
    root: "dist"
  });
});

// 定制 默认任务
gulp.task("default", ["html", "css", "js", "img", "lib", "watch", "server"]);
